<template>
  <div class="miyao">
    <div style="padding: 20px; background: rgb(252, 251, 251);">
        <div class="kflexc">
          <div style="font-size: 16px; font-weight: bold;">我的敢探号店铺秘钥</div>
          <div style="margin-left: 20px; cursor: pointer;"><img src="../../../static/kuanping/biyan.png" style="width: 20px;" v-if="biyan" @click="zhengyan" /></div>
          <div style="margin-left: 20px; cursor: pointer;"><img src="../../../static/kuanping/zhengyan.png" style="width: 20px;" v-if="!biyan" @click="biyan2" /></div>
        </div>
        <div class="kflexc" style="margin: 10px 0;">
          <div>{{apitoken}}</div>
          <div class="kflexcc" style="width: 52px; height: 28px; background: rgb(216, 231, 255); border-radius: 6px; color: rgb(0, 90, 255); margin-left: 10px; font-size: 12px; cursor: pointer;" v-if="!biyan" @click="copy()">复制</div>
        </div>
        <div class="baibeijing" style=" width: 780px; margin-bottom: 20px;">

          <div style="margin: 30px 0; font-size: 16px; font-weight: bold;">已绑定的个人分销系统：</div>
          <div v-for="item in list" :key="item.id" style=" padding: 10px 20px; background: #fff;">{{item.site_domain}}</div>

          <div class="flex" style="background: rgb(246, 248, 251); border-radius: 5px; width: 210px; margin-top: 20px; font-size: 12px; padding: 10px;">
            <div style="color: rgb(175, 179, 188); margin-right: 10px;">还未绑定敢探号店铺</div>
            <div style="color: rgb(0, 90, 255); cursor: pointer;" @click="xianshi = !xianshi">绑定店铺</div>
          </div>

          <div style="margin: 30px 0; font-size: 16px; font-weight: bold;"  v-if="xianshi">绑定个人分销系统</div>
          <div class="flexc" v-if="xianshi">
            <div class="kflexc" style="margin-bottom: 20px;"><el-input v-model="all.site_domain" placeholder="填写个人分销系统域名" style="width: 360px; margin-right: 20px;"></el-input><div style="margin-left: 10px; color: rgb(175, 179, 188); font-size: 12px;">您登录个人系统的域名地址</div></div>
            <div class="kflexc" style="margin-bottom: 20px;"><el-input v-model="all.site_token" placeholder="填写个人分销商秘钥" style="width: 360px; margin-right: 20px;"></el-input><div style="margin-left: 10px; color: rgb(0, 90, 255); font-size: 12px;" @click="ruhe_log = true">如何获取个人分销商秘钥？</div></div>
            <div class="kflexcc" @click="bangding" style="width: 86px;height: 41px; margin-bottom: 20px; background: rgb(216, 231, 255);border-radius: 20.5px; color: rgb(0, 90, 255); margin-left: 10px; font-size: 12px; cursor: pointer;">确定绑定</div>
          </div>

        </div>
    </div>

    <el-dialog title="如何获取敢探号秘钥" :visible.sync="ruhe_log" center width="900px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div>
        <div style="color: rgb(93, 93, 93); margin-bottom: 10px;">请登录个人分销系统在左侧菜单找到“系统配置”底部区域找到下图</div>
        <img src="../../../static/kuanping/miyao.png" style="width: 100%;">
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ruhe_log = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: 'miyao',
    data() {
      return {
        form:"",
        xianshi:false,
        apitoken:'********',
        ruhe_log:false,
        list:"",
        all:{},
        biyan:true
      }
    },
    created() {
      this.getlist()
    },
    methods: {
      //复制
      copy:function(){
      	const input = document.createElement('input');
      	document.body.appendChild(input);
      	input.setAttribute('value',this.apitoken);
      	input.select();
      	if (document.execCommand('copy')) {
      		document.execCommand('copy');
      		this.$message({
      		  message: '复制成功',
      		  type: 'success'
      		});
      	}
      	document.body.removeChild(input);
      },
      zhengyan:function(){
        this.$prompt('请输入密码', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {

          axios.post('/api/plan-market/user/token',{password:value})
            .then(response => {
              if (response.data.msg.code == 0) {
                this.apitoken = response.data.data.api_token
                this.biyan = false
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },
      biyan2:function(){
        this.apitoken = '********'
      },
      bangding:function(){
        axios.post('/api/plan-market/psite/make',this.all)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('保存成功');
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      getlist:function(){
        axios.get('/api/plan-market/psite/list')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .miyao {
    padding: 20px;
    /deep/ .el-input__inner{
      background: rgb(246, 248, 251) !important;
      border: 1px solid rgb(227, 232, 241) !important;
      border-radius: 20.5px !important;
    }
    /deep/ .el-button--primary {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }



    /deep/ #drop .el-button--primary {
      background-color: #2974FF;
      border: 1px #2974FF solid; margin-left: 20px;
      border-radius: 20px;
    }

    // /deep/ .el-button--primary {
    //   background: #EEF7FF;
    //   border: 1px #EEF7FF solid;
    // }

    .flex {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .f1 {
        width: 120px;
        text-align: right;
      }
    }


  }
</style>
